<template>
  <div style="text-align:left;">
    <div style="text-align:center;">
      <el-button icon="el-icon-plus" circle size="mini" @click="actionOpen"></el-button>
    </div>
    <el-dialog v-if="enable" :visible.sync="enable" title="服务器编辑">
      <el-form ref="form" label-width="80px" :rules="rules" :model="model">
        <el-form-item label="名称" prop="name">
          <el-input v-model="model.name"></el-input>
        </el-form-item>
        <el-form-item label="主机" required>
          <el-col :span="20">
            <el-form-item prop="host">
              <el-input v-model="model.host" placeholder="地址"></el-input>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="1" style="text-align:center;">:</el-col>
          <el-col :span="3">
            <el-form-item prop="port">
              <el-input v-model.number="model.port" placeholder="端口"></el-input>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="model.username"></el-input>
        </el-form-item>
        <el-form-item label="授权方式" required>
          <el-col :span="5">
            <el-select v-model="model.authtype" placeholder="请选择">
              <el-option label="密码" value="password"></el-option>
              <el-option label="密钥" value="primary_key" disabled></el-option>
            </el-select>
          </el-col>
          <el-col class="line" :span="1" style="text-align:center;">:</el-col>
          <el-col :span="18">
            <el-form-item prop="password" v-if="model.authtype == 'password'">
              <el-input v-model="model.password" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item prop="password" v-if="model.authtype == 'primary_key'">
              <el-input v-model="model.password" placeholder="密钥"></el-input>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="图标">
          <img v-for="(icon,name) in icons" :key="name" :src="icon" 
            :class="'server-icon ' + (name == model.icon ? 'active' : '')"
            @click="iconSet(name)"
          >
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="configTest" style="float:left" :loading="isTesting">测试连接</el-button>
        <el-button @click="enable = false">取 消</el-button>
        <el-button type="primary" @click="configSave">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import fsPromises from 'fs/promises';
import SSHClient from '../utils/SSHClient.js';
export default {
    name : 'DialogServerEdit',
    data() {
        return {
            enable : false,
            isTesting : false,
            icons : {
                'ubuntu' : require('../assets/ubuntu.png'),
                'centos' : require('../assets/centos.png'),
            },
            rules : {
                name : [
                    { required: true, message: '请输入服务器名称', trigger: 'blur' },
                ],
                host : [
                    { required: true, message: '请输入服务器地址', trigger: 'blur' },
                ],
                port : [
                    { required: true, message: '请输入端口号', trigger: 'blur' },
                    { type:'integer', min:1,max:65535, message: '端口号不正确', trigger: 'blur' },
                ],
                username : [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                ],
                password : [
                    { required: true, message: '请输入登录密码', trigger: 'blur' },
                ],
            },
            model : {},
        };
    },
    methods : {
        /** init and then open dialog */
        actionOpen() {
            this.model = {};
            this.model.name = 'test';
            this.model.host = '192.168.3.34';
            this.model.port = 22;
            this.model.username = 'sige';
            this.model.password = 'sige';

            this.model.icon = 'ubuntu';
            this.model.authtype = 'password';
            this.enable = true;
        },

        /** 设置图标 */
        iconSet(name) {
            this.model.icon = name;
            this.$forceUpdate();
        },

        /** 配置保存 */
        async configSave() {
            try {
                await this.$refs.form.validate();
            } catch {
                return;
            }
            
            let id = (new Date()).getTime();
            let content = JSON.stringify(this.model, null, 2);
            await fsPromises.writeFile(`data/${id}.json`, content);
            this.$store.commit('serverAppend', this.model);
            this.enable = false;
        },

        /** 配置测试 */
        async configTest() {
            try {
                await this.$refs.form.validate();
            } catch {
                return;
            }

            this.isTesting = true;
            let client = new SSHClient();
            try {
                await client.connectByPassword(
                    this.model.host,
                    this.model.port,
                    this.model.username,
                    this.model.password
                );
                client.disconnect();
                this.$message({message: '服务器连接正常',type: 'success'});
            } catch (e) {
                this.$message.error(e);
            }
            this.isTesting = false;
        },
    },
}
</script>
<style scoped>
.server-icon {width: 50px;border: solid 1px lightgrey;padding: 2px;box-sizing: border-box; margin-right: 10px; cursor: pointer;}
.server-icon.active {background: #b7b7b7;}
</style>